<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>分析细节页面</title>
  <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="/css/common.css">
  <style>
    .like {
      cursor: pointer;
      font-size: 25px;
      display: inline-block;
    }
    body{
      background: url("/image/fenxiBackground.png") no-repeat fixed;
      background-size: cover;
    }
    #app{
      position: relative;
      height: calc(100vh - 80px);
    }
    .startButton{
      width: 80%;
      height: 80px;
      position: absolute;
      bottom: 70px;
      left: 10%;
      right: 10%;
      /*background: red;*/
    }
    .textBox{
      width: 80%;
      height: auto;
      margin: 30px auto;
    }
    .imgBox{
      width: 100%;
      height: 45vh;
      margin-top: 60px;
    }
    .imgBox img{
      border-radius: 25px;
    }
    article *{
      color: white;
    }
  </style>
</head>
<body>
<div id="app">
<!--  返回图标-->
  <img src="/image/fenxiDetailjiantou.png" style="width: 50px;height: 50px;position: absolute;top: -50px;left: 0px"
    @click="back">
<!--  图片(src要动态生成)-->
  <div class="imgBox">
    <img :src="currentFenxi.icon" style="height: 100%;width: 100%">
  </div>
<!--  文本域-->
  <div class="textBox">
    <article>
      <h2>{{currentFenxi.title}}</h2>
      <p style="width: 100%;word-wrap: break-word">{{currentFenxi.description}}</p>
    </article>
  </div>
<!--  底部按钮-->
  <div class="startButton" @click="drawer = true">
    <img src="/image/fenxiDetailButton.png" style="height: 100%;width: 100%">
  </div>
<!--  抽屉 展示分析完成后的界面-->
  <el-drawer
          :visible.sync="drawer"
          :with-header="false"
          direction="btt"
          size="80%"
  >
    <template>
      <div>
        <el-row :gutter="20">
          <el-col :span="6">
            <div>
              <el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              <el-statistic title="男女比">
                <template slot="formatter"> 456/2 </template>
              </el-statistic>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              <el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
                <template slot="prefix">
                  <i class="el-icon-s-flag" style="color: red"></i>
                </template>
                <template slot="suffix">
                  <i class="el-icon-s-flag" style="color: blue"></i>
                </template>
              </el-statistic>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              <el-statistic :value="like ? 521 : 520" title="Feedback">
                <template slot="suffix">
              <span @click="like = !like" class="like">
                <i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
                <i class="el-icon-star-off" v-show="!like"></i>
              </span>
                </template>
              </el-statistic>
            </div>
          </el-col>
        </el-row>
      </div>
    </template>
  </el-drawer>
</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios-0.18.0.js"></script>
<script src="/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el : "#app",
    mounted(){
      //动态获取页面数据
      const _this = this;
      const id = localStorage.getItem('currentFenxi');
      axios({
        method : 'get',
        url : '/fenxi/'+id,
      }).then((resp)=>{
        _this.currentFenxi = resp.data.data;
      })
    },
    methods : {
      back(){
        window.history.back();
      },
    },
    data(){
      return {
        currentFenxi : {
          id : null,
          title : null,
          description : null,
          file : null,
          fenxiClass : null,
          icon : null,
        },
        drawer : false,
      //  虚假的统计数据
        like: true,
        value1: 4154.564,
        value2: 2222,
        title: '今年的增长',
      }
    },
  })
</script>
</html>